<template>
    <myMoveBox ref="myMoveBoxDom" :attr="curAttr">
        <template #show>
            <img class="icon-move" style="width: 30px;height: 30px;" src="@/static/icon/setting.svg" />
        </template>
        <template #hide>
            <div class="content" icon="@/">
                <div class="item">
                    <span>是否有CG</span>
                    <div>
                        <mySwitch :case="['OFF', 'NO']" :default="setting.isCG" @change="cg_ChangeEvent"></mySwitch>
                    </div>
                </div>
                <div class="item">
                    <span>是否已汉化</span>
                    <div>
                        <mySwitch :case="['OFF', 'NO']" :default="setting.isCN" @change="cn_ChangeEvent"></mySwitch>
                    </div>
                </div>
                <div class="item">
                    <span>是否有Bug</span>
                    <div>
                        <mySwitch :case="['OFF', 'NO']" :default="setting.isBug" @change="bug_ChangeEvent"></mySwitch>
                    </div>
                </div>
            </div>
        </template>
    </myMoveBox>
</template>

<script setup>
import myMoveBox from '@/components/moveBox-v2/index-morph.vue'
import { mySwitch } from '@/components/form/index.js'

const curAttr = {
    posiIndex: [0, 2],//起始下标
    whCount: [1, 1],//宽高长度
    zIndex: [999, 9999],//图层
    backcolor: ['#409eff', 'white'],//背景颜色
    isClick: true,//默认点击
};

const setting = {
    isCG: true,
    isCN: true,
    isBug: true,
    order: 0,
}

const emits = defineEmits(['change']);

const cg_ChangeEvent = (data) => {
    setting.isCG = data;
    emits('change', setting);
}

const cn_ChangeEvent = (data) => {
    setting.isCN = data;
    emits('change', setting);
}

const bug_ChangeEvent = (data) => {
    setting.isBug = data;
    emits('change', setting);
}


</script>

<style scoped lang="scss">
.icon {
    width: 30px;
    height: 30px;
}

.content {
    width: 300px;
    background: white;
    padding: 10px;
    box-shadow: 0 0 10px -5px #3572EF;
    border-radius: 7px;
    margin-top: 5px;
    user-select: none;

    .item {
        display: flex;
        align-items: center;
        margin-bottom: 5px;

        >span {
            width: 200px;
            font-weight: 900;
            color: rgb(66, 66, 66);
            font-size: 18px;
        }

        >div {
            width: 100px;
        }
    }

    .item:last-child {
        margin-bottom: 0px;
    }
}
</style>
